<template>
  <view class="commonLim-list">
    <view class="searchclass">
      <view class="left">
        <up-search
          v-model="query.trackingNo"
          placeholder="请输入随工单编号"
          :clearabled="true"
          :showAction="false"
          @search="handleSearch"
        />
        <view v-show="isshow1" class="left">
          <div @click="handlefocus1">
            <up-search
              v-model="query.materialTypeName"
              placeholder="请选择材质"
              :clearabled="true"
              :showAction="false"
              disabled
            />
          </div>
          <div @click="handlefocus2">
            <up-search
              v-model="query.specificationName"
              placeholder="请选择规格型号"
              :clearabled="true"
              :showAction="false"
              disabled
            />
          </div>
        </view>
      </view>
      <view class="right">
        <up-button
          type="primary"
          @click="handleSearch"
          size="small"
          shape="circle"
          class="first"
          >搜索</up-button
        >
        <up-button
          type="primary"
          @click="handlecancel"
          size="small"
          shape="circle"
          >重置</up-button
        >
      </view>
      <image
        src="../../static/tabs/qr.png"
        @click="handlecan1"
        class="mgl10px"
        style="width: 80rpx; height: 50rpx"
        v-if="isProducetiondia"
      />
    </view>
    <view class="upCcon">
      <up-icon
        :name="iconName"
        size="50rpx"
        color="#3c9cff"
        @click="handleicon"
      ></up-icon>
    </view>
    <scroll-view
      class="commonLim-listView"
      scroll-y
      @scrolltolower="onScrollToBottom"
    >
      <view v-show="state.rows.length">
        <checkbox-group @change="checkboxChange">
          <view
            v-for="(item, index) in state.rows"
            :key="item.id"
            class="commonLim-listView-item"
          >
            <view
              class="commonLim-listView-item-title"
              style="margin-bottom: 20rpx"
            >
              <label>{{ item.batchNo }}</label>
              <text>序号：{{ index + 1 }}</text>
            </view>
            <view class="bigBox" style="border: none">
              <view class="commonLim-listView-item-content">
                <view class="half width100">
                  <label>工单编号:</label>
                  <text>{{ item.workOrderCode }}</text>
                </view>
                <view class="half width100">
                  <label>随工单编号:</label>
                  <text>{{ item.trackingNo }}</text>
                </view>
                <view class="half width100">
                  <label>物料编码:</label>
                  <text>{{ item.materialCode }}</text>
                </view>
                <view class="half width100">
                  <label>物料名称:</label>
                  <text>{{ item.materialName }}</text>
                </view>
                <view class="half width100">
                  <label>材质:</label>
                  <text>{{ item.materialTypeName }}</text>
                </view>
                <view class="half width100">
                  <label>规格型号:</label>
                  <text>{{ item.specificationName }}</text>
                </view>
                <view class="half width100">
                  <label>炉号:</label>
                  <text>{{ item.heatNo }}</text>
                </view>
                <view class="half width100">
                  <label>分轮编号:</label>
                  <text>{{ item.roundNo }}</text>
                </view>
                <view class="half width100">
                  <label>入库重量:</label>
                  <text>{{ item.weight }}</text>
                </view>
              </view>
              <view class="checkClassbox" v-if="isProducetiondia">
                <checkbox :value="item.id" :checked="item.checked" />
              </view>
            </view>
            <view
              class="commonLim-listView-item-button"
              v-if="isProducetiondia"
            >
              <view class="box">
                <up-button
                  type="primary"
                  text="入库"
                  size="small"
                  @click="handlewarehousing(item)"
                ></up-button>
              </view>
            </view>
          </view>
        </checkbox-group>
      </view>
      <up-empty mode="data" v-show="state.rows.length == 0"> </up-empty>
      <up-loadmore
        v-if="state.rows.length"
        :status="loadStatus"
        :icon="true"
        loadmore-text="轻轻上拉获取更多"
        loading-text="努力加载中..."
        nomore-text="没有更多了"
        @loadmore="handleloadMore"
      />
    </scroll-view>
    <view class="bottomClass" v-if="isProducetiondia">
      <view> 已选择 {{ seleteDatas.length }} 个 </view>
      <view class="upCutton">
        <up-button
          type="primary"
          text="批量入库"
          :disabled="seleteDatas.length == 0"
          @click="handlewarehousing(seleteDatas)"
        ></up-button>
      </view>
    </view>
    <view class="pageClass">
      <up-popup :show="showReject" mode="bottom" closeOnClickOverlay>
        <view class="btn-group">
          <text class="cancel" @click="showReject = false">取消</text>
          <text class="confirm" @click="handleConfirm">确定</text>
        </view>
        <view class="flexCenter">
          <view class="popup-content" style="margin: 40rpx">
            <view style="margin-left: 40rpx">设置存放位置</view>
            <view class="fenlun">
              <view class="spacenowrap">库房：</view>
              <up-picker-data
                v-model="currentTable.wherehouse"
                title="请选择库房"
                :options="memberStore.warehouseLists"
                valueKey="value"
                labelKey="label"
              >
              </up-picker-data>
            </view>
            <view class="fenlun">
              <view class="spacenowrap">库位：</view>
              <up-picker-data
                v-model="currentTable.storageLocation"
                title="请选择库位"
                :options="memberStore.locationLists"
                valueKey="value"
                labelKey="label"
              >
              </up-picker-data>
            </view>
          </view>
        </view>
      </up-popup>
    </view>
  </view>
</template>

<script setup>
import {
  managementPage,
  detailPageWeighing,
  detailBulkInbound,
} from "./api.js";
import { saomarequest1 } from "../PendingInspectionConfirmation/api.js";
import { commonListsFn } from "@/utils/index.js";
import { useMemberStore } from "@/stores/modules/member";
import { onCan } from "@/utils/index.js";
const memberStore = useMemberStore();
const deprops = defineProps(["title"]);
const isProducetiondia = computed(() => deprops.title == "生产待入库");
const iconName = ref("arrow-down");
const currentTable = ref({});
const showReject = ref(false);
//点击复选框选中的数据
const seleteDatas = ref([]);
const isshow1 = computed(() => {
  if (iconName.value == "arrow-down") {
    return false;
  } else {
    return true;
  }
});
const handleicon = () => {
  if (iconName.value == "arrow-down") {
    iconName.value = "arrow-up";
  } else {
    iconName.value = "arrow-down";
  }
};
const callback1 = async (obj) => {
  if (isProducetiondia) {
    return managementPage(obj);
  } else {
    return detailPageWeighing(obj);
  }
};
const {
  query,
  state,
  loadStatus,
  handleSearch,
  handlecancel,
  onScrollToBottom,
} = commonListsFn(callback1);

const handlewarehousing = (objOrArray) => {
  showReject.value = true;
  currentTable.value.wherehouse = "";
  currentTable.value.storageLocation = "";
  if (Array.isArray(objOrArray)) {
    currentTable.value.ids = objOrArray.map((item) => item.id);
  } else {
    currentTable.value.ids = [objOrArray.id];
  }
};
const handleConfirm = async () => {
  if (!currentTable.value.wherehouse) {
    return uni.showToast({
      icon: "none",
      title: "请选择库房",
    });
  }
  if (!currentTable.value.storageLocation) {
    return uni.showToast({
      icon: "none",
      title: "请选择库位",
    });
  }
  try {
    uni.showLoading({
      title: "加载中",
    });
    await detailBulkInbound({
      ids: currentTable.value.ids,
      operator: memberStore.userId,
      wherehouse: currentTable.value.wherehouse,
      storageLocation: currentTable.value.storageLocation,
    });
    uni.showToast({
      icon: "success",
      title: "入库成功",
    });
    handleSearch();
  } finally {
    showReject.value = false;
    uni.hideLoading();
  }
};

const handlefocus1 = () => {
  uni.navigateTo({
    url: `/pages/searchcaizhi/searchcaizhi?from=caizhi`,
  });
};
const handlefocus2 = async () => {
  if (query.value.materialTypeId) {
    uni.navigateTo({
      url: `/pages/searchcaizhi/searchcaizhi?from=guigexinghao&pId=${query.value.materialTypeId}`,
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "请选择材质",
    });
  }
};
const fengzhuang1 = async (value) => {
  const res = await saomarequest1(value);
  if (res) {
    state.rows.push(res);
  }
};
const handlecan1 = () => {
  onCan(fengzhuang1);
};

const checkboxChange = (e) => {
  const values = e.detail.value;
  state.rows.forEach((item) => {
    if (values.includes(item.id)) {
      item.checked = true;
      const obj = seleteDatas.value.find((list) => list.id == item.id);
      if (!obj) {
        seleteDatas.value.push(item);
      }
    } else {
      item.checked = false;
      seleteDatas.value = seleteDatas.value.filter(
        (list) => list.id !== item.id
      );
    }
  });
  console.log(state.rows, 1234566);
};

onLoad(() => {
  uni.setNavigationBarTitle({
    title: deprops.title,
  });
  Promise.all([
    memberStore.apiDictfnwarehouse("warehouse"),
    memberStore.apiDictfnlocation("storage_location"),
  ]);
  console.log(memberStore.locationLists, "locationLists");
});
onShow(() => {
  if (memberStore.from_Page == "caizhi") {
    query.value.materialTypeId = memberStore.zemId;
    query.value.materialTypeName = memberStore.zemName;
    query.value.specificationId = "";
    query.value.specificationName = "";
  } else if (memberStore.from_Page == "guigexinghao") {
    query.value.specificationId = memberStore.zemId;
    query.value.specificationName = memberStore.zemName;
  }
  memberStore.zemId = "";
  memberStore.zemName = "";
  memberStore.from_Page = "";
  handleSearch();
});
</script>

<style lang="scss" scoped>
.bottomClass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  .upCutton {
    width: 30%;
  }
}
.popup-content {
  .u-picker-data__trigger__cover {
    border: 0.5px solid #dadbde !important;
    border-radius: 4px !important;
  }
}
</style>